<!-- Copyright (c) 2016 Google Inc. All rights reserved. -->

<style>
table {
  margin: 0 0 40px;
}
table,
th,
td {
  padding: 30px;
  border: 1px solid;
}
</style>
<table>
  <!-- header -->
  <tr>
    <th>template</th>
    <th>UI</th>
  </tr>

  <!-- email -->
  <tr>
    <td rowspan="4">email</td>
    <td><div id="email" class="firebaseui-container"></div></td>
  </tr>
  <tr>
    <td><div id="email-with-email" class="firebaseui-container"></div></td>
  </tr>
  <tr>
    <td><div id="email-with-email-disabled" class="firebaseui-container"></div></td>
  </tr>
  <tr>
    <td><div id="email-error" class="firebaseui-container"></div></td>
  </tr>

  <!-- phone -->
  <tr>
    <td rowspan="2">phone</td>
    <td><div id="phone-number" class="firebaseui-container"></div></td>
  </tr>
  <tr>
    <td><div id="phone-number-error" class="firebaseui-container"></div></td>
  </tr>

  <!-- phone confirmation code -->
  <tr>
    <td rowspan="2">phone confirmation code</td>
    <td><div id="phone-confirmation-code" class="firebaseui-container"></div></td>
  </tr>
  <tr>
    <td><div id="phone-confirmation-code-error" class="firebaseui-container"></div></td>
  </tr>

  <!-- resend -->
  <tr>
    <td rowspan="2">resend</td>
    <td><div id="resend-countdown" class="firebaseui-container"></div></td>
  </tr>
  <tr>
    <td><div id="resend-link" class="firebaseui-container"></div></td>
  </tr>

  <!-- idpButton -->
  <tr>
    <td>idpButton</td>
    <td><div id="idp-button" class="firebaseui-container"></div></td>
  </tr>

  <!-- submitButton -->
  <tr>
    <td rowspan="2">submitButton</td>
    <td><div id="submit-button" class="firebaseui-container"></div></td>
  </tr>
  <tr>
    <td><div id="submit-button-custom-label" class="firebaseui-container"></div></td>
  </tr>

  <!-- name -->
  <tr>
    <td rowspan="3">name</td>
    <td><div id="name" class="firebaseui-container"></div></td>
  </tr>
  <tr>
    <td><div id="name-with-name" class="firebaseui-container"></div></td>
  </tr>
  <tr>
    <td><div id="name-error" class="firebaseui-container"></div></td>
  </tr>

  <!-- newPassword -->
  <tr>
    <td rowspan="3">newPassword</td>
    <td><div id="new-password" class="firebaseui-container"></div></td>
  </tr>
  <tr>
    <td><div id="new-password-toggled" class="firebaseui-container"></div></td>
  </tr>
  <tr>
    <td><div id="new-password-error" class="firebaseui-container"></div></td>
  </tr>

  <!-- password -->
  <tr>
    <td rowspan="3">password</td>
    <td><div id="password" class="firebaseui-container"></div></td>
  </tr>
  <tr>
    <td><div id="password-current" class="firebaseui-container"></div></td>
  </tr>
  <tr>
    <td><div id="password-error" class="firebaseui-container"></div></td>
  </tr>

  <!-- passwordRecoveryButton -->
  <tr>
    <td>passwordRecoveryButton</td>
    <td><div id="password-recovery-button" class="firebaseui-container"></div></td>
  </tr>

  <!-- troubleGettingEmailButton -->
  <tr>
    <td>troubleGettingEmailButton</td>
    <td><div id="trouble-getting-email-button" class="firebaseui-container"></div></td>
  </tr>

  <!-- resendEmailLinkButton -->
  <tr>
    <td>resendEmailLinkButton</td>
    <td><div id="resend-email-link-button" class="firebaseui-container"></div></td>
  </tr>

  <!-- cancelButton -->
  <tr>
    <td rowspan="2">cancelButton</td>
    <td><div id="cancel-button" class="firebaseui-container"></div></td>
  </tr>
  <tr>
    <td><div id="cancel-button-custom-label" class="firebaseui-container"></div></td>
  </tr>

  <!-- infoBar -->
  <tr>
    <td>infoBar</td>
    <td>
      <div id="info-bar" class="firebaseui-container">
        <p>First paragraph.</p>
        <p>Second paragraph.</p>
        <p>Third paragrapth.</p>
      </div>
    </td>
  </tr>

  <!-- tosPpLink -->
  <tr>
    <td>tosPpLink</td>
    <td><div id="tos-pp-link" class="firebaseui-container"></div></td>
  </tr>

  <!-- phoneTosPp -->
  <tr>
    <td>phoneTosPp</td>
    <td><div id="phone-tos-pp" class="firebaseui-container"></div></td>
  </tr>

  <!-- fullMessageTosPp -->
  <tr>
    <td>fullMessageTosPp</td>
    <td><div id="full-message-tos-pp" class="firebaseui-container"></div></td>
  </tr>

  <!-- busyIndicator -->
  <tr>
    <td rowspan="2">busyIndicator</td>
    <td>
      <div id="busy-indicator" class="firebaseui-container">
        <h1>Title</h1>
        <p><a href="https://mail.google.com">Gmail</a></p>
        <p><a href="https://drive.google.com">Google Drive</a></p>
        <p><a href="https://calendar.google.com">Google Calendar</a></p>
      </div>
    </td>
  </tr>
  <tr>
    <td>
      <div id="busy-indicator-spinner" class="firebaseui-container">
        <h1>Title</h1>
        <p><a href="https://mail.google.com">Gmail</a></p>
        <p><a href="https://drive.google.com">Google Drive</a></p>
        <p><a href="https://calendar.google.com">Google Calendar</a></p>
      </div>
    </td>
  </tr>

  <!-- recaptcha -->
  <tr>
    <td rowspan="2">recaptcha</td>
    <td><div id="recaptcha" class="firebaseui-container"></div></td>
  </tr>
  <tr>
    <td><div id="recaptcha-error" class="firebaseui-container"></div></td>
  </tr>

  <!-- loading dialog -->
  <tr>
    <td rowspan="2">loadingDialog</td>
    <td>
      <div class="firebaseui-container">
        <button id="show-loading-dialog">Show loading dialog</button>
      </div>
    </td>
  </tr>
  <tr>
    <td>
      <div class="firebaseui-container">
        <button id="show-loading-dialog-long">Show loading dialog with long text</button>
      </div>
    </td>
  </tr>

  <!-- done dialog -->
  <tr>
    <td>doneDialog</td>
    <td>
      <div class="firebaseui-container">
        <button id="show-done-dialog">Show done dialog</button>
      </div>
    </td>
  </tr>

  <!-- listBox dialog -->
  <tr>
    <td rowspan="2">listBox</td>
    <td>
      <div class="firebaseui-container">
        <button id="show-list-box">Show list box</button>
      </div>
    </td>
  </tr>
  <tr>
    <td>
      <div class="firebaseui-container">
        <button id="show-list-box-with-icons">Show list box with icons</button>
      </div>
    </td>
  </tr>

  <!-- tenantSelectionButton -->
  <tr>
    <td>tenantSelectionButton</td>
    <td><div id="tenant-selection-button" class="firebaseui-container"></div></td>
  </tr>
</table>
